import {
  patient_callLog_list,
  patient_guidance_info,
  patient_record_videos,
} from '@/services/guide';
import age from '@/utils/age';
import download from '@/utils/downVideo';
import timeToHms from '@/utils/time';
import { ProColumns, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Modal, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import Video from './Video';

interface Iprops {
  isShowInHospitalDetailModal: (show: boolean) => void;
  inHospitalDetailModal: boolean;
  guideId: number | undefined;
  //   actionRef: React.MutableRefObject<ActionType | undefined>;
}
type GithubIssueItem = {
  id: number;
  time: string;
  call_type: number;
  create_time: string;
  status: number;
  status_d: string;
  total_time: number;
};
const InHospitalGuideDetail = (props: Iprops) => {
  const { isShowInHospitalDetailModal, inHospitalDetailModal, guideId } = props;
  // 查看指导视频模态框
  const [checkVideo, setCheckVideo] = useState(false);
  // 存储指导详情
  const [guideInfo, setGuideInfo] = useState<any>(undefined);
  // 存储视频url
  const [videoUrl, setVideoUrl] = useState('');

  // 控制查看录制视频模态框的显示与隐藏
  const isShowCheckVideoModal = (status: boolean) => {
    setCheckVideo(status);
  };

  useEffect(() => {
    // 获取指导详情
    const getData = async () => {
      if (guideId) {
        let res: any = await patient_guidance_info({ id: guideId });
        console.log('指导详情', res);
        if (res.code == 200) {
          setGuideInfo(res.data);
        }
      }
    };
    getData();
  }, []);

  // 获取通话记录列表
  const get_patient_callLog_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    let request_body = {
      ...params,
      pcurrent: params.current,
      pageSize: params.pageSize,
      patient_guidance_id: guideId,
    };
    let res = await patient_callLog_list(request_body);
    console.log('呼叫记录', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };

  // 获取录制视频列表
  const video_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    let request_body = {
      ...params,
      pcurrent: params.current,
      pageSize: params.pageSize,
      id: guideId,
    };
    let res = await patient_record_videos(request_body);
    console.log('录制视频', res);
    return {
      data: res.data,
      success: true,
      total: res.data.total_count,
    };
  };

  // 通话记录
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '通话时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '通话方式',
      dataIndex: 'call_type',
      align: 'center',
      valueEnum: {
        0: {
          text: '语音',
        },
        1: {
          text: '视频',
        },
      },
    },
    {
      title: '通话时长',
      dataIndex: 'time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        if (record.status != 3) {
          return record.status_d;
        } else {
          return timeToHms(record.time);
        }
      },
    },
  ];
  // 指导视频
  const columns1: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      align: 'center',
    },
    {
      title: '时长',
      dataIndex: 'total_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => timeToHms(record.total_time),
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => (
        <>
          <Button
            key="detail"
            type="link"
            onClick={() => {
              setVideoUrl(record.playback_url);
              isShowCheckVideoModal(true);
            }}
          >
            查看
          </Button>
          <Button
            key="download"
            type="link"
            onClick={() => {
              download(record.playback_url, record.start_time.replace(/\s/g, '/'), '院内指导');
            }}
          >
            下载
          </Button>
        </>
      ),
    },
  ];
  return (
    <Modal
      title="院内指导详情"
      open={inHospitalDetailModal}
      onCancel={() => isShowInHospitalDetailModal(false)}
      width={1200}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      {guideInfo === undefined ? (
        ''
      ) : (
        <>
          <ProDescriptions
            dataSource={guideInfo}
            column={3}
            columns={[
              {
                title: '手机号',
                key: 'patient_phone',
                dataIndex: 'patient_phone',
              },
              {
                title: '姓名',
                key: 'patient_name',
                dataIndex: 'patient_name',
              },
              {
                title: '性别',
                key: 'patient_sex',
                dataIndex: 'patient_sex',
                valueType: 'select',
                valueEnum: {
                  0: {
                    text: '未知',
                  },
                  1: {
                    text: '男',
                  },
                  2: {
                    text: '女',
                  },
                },
              },
              {
                title: '年龄',
                key: 'age',
                dataIndex: 'patient_birth',
                render: (_, record) => age(record.patient_birth),
              },
              {
                title: '身份证号',
                key: 'patient_idcard',
                dataIndex: 'patient_idcard',
              },
              {
                title: '出生日期',
                key: 'patient_birth',
                dataIndex: 'patient_birth',
              },
              {
                title: '家庭地址',
                key: 'patient_address',
                dataIndex: 'patient_address',
                render: (_, record) => {
                  return (
                    record.patient_province +
                    record.patient_ctiy +
                    record.patient_area +
                    record.patient_address
                  );
                },
              },
              {
                title: '计划指导时间',
                key: 'plan_time',
                dataIndex: 'plan_time',
              },
              {
                title: '指导时间',
                key: 'guidance_time',
                dataIndex: 'guidance_time',
              },
              {
                title: '指导记录',
                key: 'guidance_content',
                dataIndex: 'guidance_content',
              },
            ]}
          ></ProDescriptions>
          <Tabs
            defaultActiveKey="通话记录"
            items={[
              {
                key: '通话记录',
                label: '通话记录',
                children: (
                  <ProTable<GithubIssueItem>
                    columns={columns}
                    cardBordered
                    request={async (params = {}) => get_patient_callLog_list(params)}
                    editable={{
                      type: 'multiple',
                    }}
                    rowKey={(record) => record.id}
                    search={false}
                    options={false}
                    pagination={{
                      pageSize: 10,
                    }}
                    dateFormatter="string"
                    headerTitle=""
                  />
                ),
              },
              {
                key: '指导视频',
                label: '指导视频',
                children: (
                  <ProTable<GithubIssueItem>
                    columns={columns1}
                    cardBordered
                    request={async (params = {}) => video_list(params)}
                    editable={{
                      type: 'multiple',
                    }}
                    rowKey={(record) => record.id}
                    search={false}
                    options={false}
                    pagination={{
                      pageSize: 10,
                    }}
                    dateFormatter="string"
                    headerTitle=""
                  />
                ),
              },
            ]}
          />
        </>
      )}

      {/* 查看录制视频模态框 */}
      {checkVideo ? (
        <Video
          checkVideo={checkVideo}
          isShowCheckVideoModal={isShowCheckVideoModal}
          videoUrl={videoUrl}
        ></Video>
      ) : (
        ''
      )}
    </Modal>
  );
};
export default InHospitalGuideDetail;
